<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template/template_1.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui">

    <ui:define name="content">
        <div>
            <f:view>
                <h:form>
                    <h1><h:outputText value="List"/></h1>
                    <p:dataTable value="#{mp3LibraryMBean.detailsSong}" var="item"
                                 emptyMessage="No customer found with given criteria"
                                 widgetVar="customerTable" 
                                 paginator="true"  
                                 rows="10">
                        <f:facet name="header">    
                            <p:outputPanel>    
                                <h:outputText value="Search all fields:" />    
                                <p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />    
                            </p:outputPanel>    
                        </f:facet>    

                        <p:column sortBy="#{item.titre}"
                                  filterBy="#{item.titre}"
                                  filterMatchMode="contains">
                            <f:facet name="header">
                                <h:outputText value="Titre"/>
                            </f:facet>
                            <h:commandLink action="#{userManagedBean.addSongIntoPlayList(item)}" value="#{item.titre}"/>
                        </p:column>

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Artiste"/>
                            </f:facet>
                            <h:outputText value="#{item.afficherArtiste()}"/>
                        </p:column>

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Albums"/>
                            </f:facet>
                            <h:outputText value="#{item.afficherAlbums()}"/>
                        </p:column>

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="genre"/>
                            </f:facet>
                            <h:outputText value="#{item.genre}"/>
                        </p:column>

                    </p:dataTable>
                </h:form>
            </f:view>
        </div>

        <div>
            <f:view>
                <h:form>
                    <p:dataTable var="item" value="#{userManagedBean.detailsListLecture}"
                                 paginator="true"
                                 lazy="true"
                                 rows="10">  
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Titre"/>  
                            </f:facet>  
                            <h:outputText value="#{item.titre}" />
                        </p:column>  

                        <p:column>
                            <h:commandLink action="#{userManagedBean.removeSongFromPlayList(item)}" value="supprimer"/> 
                        </p:column>
                    </p:dataTable>  
                </h:form>
            </f:view>
        </div>
        <h:form>
            <h:commandButton value="SavePlayList" action="#{userManagedBean.savePlayList()}"/>
        </h:form>
    </ui:define>
</ui:composition>
